<template>
  <el-form
    ref="formRef"
    :model="form"
    label-width="120px"
    class="demo-dynamic mg-tp-10"
  >
    <el-form-item label="username" prop="name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item prop="startDate">
      <el-date-picker
        v-model="form.startDate"
        type="date"
        label="Pick a date"
        placeholder="Pick a date"
        style="width: 100%"
      />
    </el-form-item>
    <el-form-item prop="endDate">
      <el-date-picker
        v-model="form.endDate"
        type="date"
        label="Pick a date"
        placeholder="Pick a date"
        style="width: 100%"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getUserList()">Query</el-button>
    </el-form-item>
  </el-form>

  <el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </el-row>
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="pager.currPage"
      v-model:page-size="pager.pageSize"
      :page-sizes="[10, 50, 100, 500]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pager.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs, watch, nextTick } from 'vue';
import { getUserListApi } from '@/api/user/index'
const form = reactive({
  name: '',
  startDate: '',
  endDate:''
})
const currentPage = ref(1)
const pageSize = ref(10)
let pager = reactive({
  total: 0,
  currPage: 1,
  pageSize: 10
})
onMounted(() => {
  getUserList()
})
function getUserList() {
  let data = {
    username: form.name,
    startDate: form.startDate,
    endDate: form.endDate,
  }
  getUserListApi(data).then(res => {
    pager.total = res.data.total
    alert(JSON.stringify(res))
  })
}
// function clickQuery() {
//
// }
// function initPager() {
//   pager = {
//     total: 0,
//     currPage: 1,
//     pageSize: this.pager.pageSize
//   }
// }
// function handelSizeChange (val) {
//   this.pager.pageSize = val
//   this.initPager()
//   this.initData(this.userSearch, this.userPager)
// }
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

<style lang="scss" scoped>
.demo-pagination-block {
  margin-top: 10px;
  text-align: center;
}
</style>
